<script lang="ts">
    import { useStyle } from "../utils/useStyle";
    import Cell from "./Cell.svelte";
    import type { TableStore } from "./Table";
    import { useTableContext } from "./Table.svelte";

    type RowProps = {
        store: TableStore;
        data: any;
        index: number;
    };
    const ctx: any = useTableContext();
    const { data, index, store, ...rest }: RowProps = $props();

    const classList = $derived({
        "cm-table-row": true,
        "cm-table-row-ood": index % 2 === 0,
        "cm-table-row-even": index % 2 !== 0,
        // "cm-table-row-selected": props.data._highlight,
    });

    const rowStyle = $derived(
        useStyle(
            {},
            {
                display: data._show ? "" : "none",
            },
        ),
    );

    const getSpan = (column: any, columnIndex: number) => {
        if (ctx && ctx.spanMethod) {
            const ret = ctx.spanMethod(data, column, index, columnIndex);
            if (ret) {
                return ret;
            }
        }
        return [1, 1];
    };
</script>

<tr {...rest} class={classList} style={rowStyle}>
    <!-- expand展开的内容 -->
    {#if data._type === "expandChildren"}
        <Cell type="td" {data} column={data.column} {index} showFixedLeft={store.showFixedLeft} showFixedRight={store.showFixedRight} colSpan={store.columns.length} />
    {:else}
        {#each store.columns as column, columnIndex (column.name || column.type)}
            {@const [rowSpan, colSpan] = getSpan(column, columnIndex)}
            {#if rowSpan && colSpan}
                <Cell type="td" {data} {column} {index} colIndex={columnIndex} showFixedLeft={store.showFixedLeft} showFixedRight={store.showFixedRight} {rowSpan} {colSpan} />
            {/if}
        {/each}
    {/if}
</tr>
